// 商品文件列表
// import { Button } from 'element-ui'
export const addProductList = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addProductList', {
        model: {
            defaults: {
                tagName: 'div',
                name: 'addProductList',
                droppable: true,
                components: [{
                    tagName:'table',
                    draggable: false, // 不可拖动
                    components: [{
                            tagName: 'thead',
                            draggable: false, // 不可拖动
                               components: [{
                                    tagName: 'tr',
                                        components: [{
                                            tagName: 'th',
                                            content: '名称',
                                        },{
                                            tagName: 'th',
                                            content: '版本',
                                        },{
                                            tagName: 'th',
                                            content: '文件类型',
                                        },{
                                            tagName: 'th',
                                            content: '说明',
                                        }
                                    ]
                                    }]
                            },
                        
                        {
                            tagName: 'tbody',
                            attributes: {
                               id: 'productList'
                            },
                        }
                    ]
                }],
               
                traits: [],
                script() {
                    var file = [{

                            url: 'https://mybuketh.oss-cn-beijing.aliyuncs.com/pricture.png',
                            name: '测试文档.xls',
                            size: '16KB',
                            version: 'V1.0',
                            Dtype: '文档',
                            description: '-'

                        }, {

                            url: 'https://mybuketh.oss-cn-beijing.aliyuncs.com/pricture.png',
                            name: '测试文档.xls',
                            size: '16KB',
                            version: 'V1.0',
                            Dtype: '文档',
                            description: '-'
                        },
                        {
                            url: 'https://mybuketh.oss-cn-beijing.aliyuncs.com/pricture.png',
                            name: '测试文档.xls',
                            size: '16KB',
                            version: 'V1.0',
                            Dtype: '文档',
                            description: '-'
                        }
                    ];
                    let tbody = document.getElementById('productList');
                    tbody.innerHTML = file.map(function (value, index) {
                        return `<tr id="row1">
                            <td>
                                <div style="display: flex;align-items: center;">
                                    <img id="img1" style=" width: 60px;height: 60px;background-color: rgb(242, 242, 242);padding-top: 10px;" src="${value.url}" alt="图片">
                                    <div class="file-name">
                                        <p id="name" style="padding-top: 5px;font-weight: 500;color: #333333;font-family: Arial Normal, Arial, sans-serif;font-size: 16px;">${value.name}</p>
                                        <p id="size" style="color: rgb(196, 196, 196);">${value.size}</p>
                                    </div>
                                </div>
                            </td>
                            <td id="version">${value.version}</td>
                            <td id="Dtype">${value.Dtype}</td>
                            <td id="description">${value.description}</td>
                        </tr>`
                    }).join('');
                },
                styles: `
                    table {
            border-collapse: collapse;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        thead tr {
            background-color: rgba(245, 247, 250, 1);
            height: 54px;
            width: 100%;
            box-sizing: border-box;
        }

        thead tr th {
            font-weight: 300;
            padding-left: 10px;
            color: #333333;
            font-family: Arial Normal, Arial, sans-serif;
            font-size: 16px;
            text-align: left;
        }

        thead tr th:first-child {
            width: 35%;
        }

        thead tr th:last-child {
            width: 35%;
        }

        tbody tr {
            border-bottom: 1px solid #e5e5e5;
        }

        tbody td {
            color: #333333;
            font-family: Arial Normal, Arial, sans-serif;
            font-size: 16px;
            padding-left: 10px;
        }

        .file-container {
            display: flex;
            align-items: center;

        }

        #img1 {
            width: 60px;
            height: 60px;
            background-color: rgb(242, 242, 242);
            padding-top: 10px;
        }

        .file-name #name {
            padding-top: 5px;
            font-weight: 500;
            color: #333333;
            font-family: Arial Normal, Arial, sans-serif;
            font-size: 16px;
        }
                `
            },
            init() {},
        }
    });

    // 注册组件
    editor.BlockManager.add('addProductList', {
        label: '商品文件',
        category: '其他类',
        media:'<svg t="1723024995335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5916" width="30" height="30"><path d="M211.6 129.6c17.7 0 32.7 6 45 18 12.3 12 18.5 26.9 18.5 44.6v48.3c0 17.7-6.2 32.7-18.5 45-12.3 12.3-27.3 18.5-45 18.5h-50.2c-17.1 0-31.8-6.2-44.1-18.5s-18.5-27.3-18.5-45v-48.3c0-17.7 6.2-32.5 18.5-44.6 12.3-12 27-18 44.1-18h50.2z m650.3 0c17.1 0 31.8 6 44.1 18s18.5 26.9 18.5 44.6v48.3c0 17.7-6.2 32.7-18.5 45-12.3 12.3-27 18.5-44.1 18.5H457.1c-17.7 0-32.7-6.2-45-18.5-12.3-12.3-18.5-27.3-18.5-45v-48.3c0-17.7 6.2-32.5 18.5-44.6 12.3-12 27.3-18 45-18h404.8zM211.6 424.4c17.7 0 32.7 6.2 45 18.5 12.3 12.3 18.5 27.3 18.5 45v48.3c0 17.1-6.2 31.8-18.5 44.1s-27.3 18.5-45 18.5h-50.2c-17.1 0-31.8-6.2-44.1-18.5s-18.5-27-18.5-44.1v-48.3c0-17.7 6.2-32.7 18.5-45 12.3-12.3 27-18.5 44.1-18.5h50.2z m650.3 0c17.1 0 31.8 6.2 44.1 18.5s18.5 27.3 18.5 45v48.3c0 17.1-6.2 31.8-18.5 44.1s-27 18.5-44.1 18.5H457.1c-17.7 0-32.7-6.2-45-18.5-12.3-12.3-18.5-27-18.5-44.1v-48.3c0-17.7 6.2-32.7 18.5-45 12.3-12.3 27.3-18.5 45-18.5h404.8zM211.6 720.2c17.7 0 32.7 6.2 45 18.5 12.3 12.3 18.5 27 18.5 44.1v48.3c0 17.7-6.2 32.7-18.5 45-12.3 12.3-27.3 18.5-45 18.5h-50.2c-17.1 0-31.8-6.2-44.1-18.5s-18.5-27.3-18.5-45v-48.3c0-17.1 6.2-31.8 18.5-44.1s27-18.5 44.1-18.5h50.2z m650.3 0c17.1 0 31.8 6.2 44.1 18.5s18.5 27 18.5 44.1v48.3c0 17.7-6.2 32.7-18.5 45-12.3 12.3-27 18.5-44.1 18.5H457.1c-17.7 0-32.7-6.2-45-18.5-12.3-12.3-18.5-27.3-18.5-45v-48.3c0-17.1 6.2-31.8 18.5-44.1s27.3-18.5 45-18.5h404.8z m0 0" p-id="5917"></path></svg>',
        content: {
            type: 'addProductList'
        },
    });
};